<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Zjffun</title>
</head>

<body>
    <style>
        /* || General setup */
        html, body {
          margin: 0;
          padding: 0;
        }
    
        html {
          font-size: 10px;
          background-color: #efefef;
        }
        
        body {
          margin: 0 auto;
        }
        
        header{
            padding: 10px 0;
            background:rgb(36, 41, 46);
        }

        header h1{
            font-size: 3rem;
            color: white;
            text-shadow: 2px 2px 10px black;
            margin: 0;
            display: inline-block;
        }

        header form {
          padding: 0 2em;
          display: inline-block;
        }

    
        h1, h2, h3 {
          font-family: 'Sonsie One', cursive;
          color: #2a2a2a;
        }
    
        p, input, li {
          font-family: 'Open Sans Condensed', sans-serif;
          color: #2a2a2a;
        }
    
    
        h2 {
          font-size: 3rem;
          text-align: center;
        }
    
        h3 {
          font-size: 2.2rem;
        }
    
        p, li {
          font-size: 1.6rem;
          line-height: 1.5;
        }
        span {
          color: green;
        }
        /* || header layout */
    
        nav, article, aside, footer {
          background-color: white;
        }
    
        nav {
          height: 50px;
          background-color: #929292af;
          display: flex;
        }
    
        nav ul {
          padding: 0;
          list-style-type: none;
          flex: 2;
          display: flex;
          height: 100%;
          margin: 0;
        }
    
        nav li {
          display: inline;
          text-align: center;
          flex: 1;
          cursor: pointer;
        }
    
        nav a {
          display: inline-block;
          font-size: 1.5rem;
          text-transform: uppercase;
          text-decoration: none;
          color: black;
        }

        nav li:hover {
          background: #fff;
        }

    
        
    
        input {
          font-size: 1.6rem;
          height: 32px;
        }
    
        input[type="search"] {
          flex: 3;
        }
    
        input[type="submit"] {
          flex: 1;
          margin-left: 1rem;
          background: #333;
          border: 0;
          color: white;
        }
    
        /* || main layout */
    
        main {
          display: flex;
          padding: 0 20px;
        }
        .container{
            padding: 0 20px;
            width: 100%;
        }
    
        article {
          flex: 4;
        }
    
        aside {
          flex: 1;
          border-left: 1px solid #000;
        }
    
        aside li {
          padding-bottom: 10px;
        }
    
        footer {
            text-align: center;
        margin-top: 10px;
          padding: 20px 0;
          background: #fff;
        }
        

        @media (min-width: 768px) {

        }
        @media (min-width: 992px){ 

        }
        @media (min-width: 1200px) {
            main, .container {
                width: 1200px;
                margin: 0 auto;
            }
        }

    </style>
    <!-- Here is our main header that is used across all the pages of our website -->
    <header>
        <div class="container">
            <h1>Zjffun</h1>
            <form>
                <input type="search" name="keywords" placeholder="搜索">
            </form>
        </div>
    </header>
    <nav>
        <div class="container">
            <ul>
                <li><a href="#">01前端</a></li>
                <li><a href="#">02服务端</a></li>
                <li><a href="#">03数据库</a></li>
                <li><a href="#">04运维&测试</a></li>
                <li><a href="#">05实用技术</a></li>
                <li><a href="#">06CS</a></li>
                <li><a href="#">07GIS</a></li>
                <li><a href="#">08常用语言</a></li>
                <li><a href="#">09不常用语言</a></li>
                <li><a href="#">10面试</a></li>
            </ul>
        </div>
    </nav>
    <!-- Here is our page's main content -->
    <main>

        <!-- It contains an article -->

        <article>
            <section>
                test

            </section>
            <section>
                test

            </section>
            <section>
                test

            </section>
            <section>
                test

            </section>
            <h2>Article heading</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum
                mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor.
                Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta
                lorem lacinia consectetur.</p>

            <h3>subsection</h3>

            <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

            <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra
                tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

            <h3>Another subsection</h3>

            <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis
                parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
                facilisis semper ac in est.</p>

            <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio.
                Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
                diam iaculis velit, is fringille sem nunc vet mi.</p>
        </article>

        <!-- the aside content can also be nested within the main content -->
        <aside>
            <h2>Related</h2>

            <ul>
                <li><a href="#">还没想好写放点什么</a></li>
                <li><a href="#">放点什么好呢</a></li>
                <li><a href="#">幻想嘉年华</a></li>
                <li><a href="#">bersercar</a></li>
                <li><a href="#">React？</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <div class="container">
            ©Copyright Zjffun
        </div>
    </footer>
</body>

</html>